<template>
  <div class="editParamsDialog">
    <el-dialog :title="title" :visible.sync="visible">
      <el-form
        :model="attrFrom"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        label-position="right"
      >
        <el-form-item label="参数名称" prop="attr_name">
          <el-input v-model="attrFrom.attr_name"></el-input>
        </el-form-item>

        <el-form-item label="参数值" prop="attr_vals">
          <el-input v-model="attrFrom.attr_vals"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="editParam()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editCateAttribute, addCateAttribute } from "@/api/goods";
import { mapState } from "vuex";

export default {
  name: "editParamsDialog",
  data() {
    return {
      title: "编辑参数",
      visible: false,
      attrFrom: {
        attr_id: 0,
        attr_name: "",
        attr_vals: "",
        attr_sel: "", //用于添加参数
      },
      rules: {
        attr_name: [
          { required: true, message: "参数名称不可为空", trigger: "blur" },
        ],
        attr_vals: [
          { required: true, message: "参数值不可为空", trigger: "blur" },
        ],
      },
    };
  },
  props: {},
  created() {
    this.$bus
      .$off("editParamsDialogVisible")
      .$on(
        "editParamsDialogVisible",
        (attr_id, attr_name, attr_vals, attr_sel, title) => {
          this.visible = true;
          this.attrFrom.attr_id = attr_id;
          this.attrFrom.attr_name = attr_name;
          this.attrFrom.attr_vals = attr_vals;
          this.attrFrom.attr_sel = attr_sel;
          this.title =
            title === "编辑参数"
              ? title
              : attr_sel === "only"
              ? "添加静态参数"
              : "添加动态参数";
          //关闭检查
          this.$nextTick(() => {
            this.$refs["ruleForm"].clearValidate();
          });
        }
      );
  },
  methods: {
    editParam() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          //编辑
          if (this.title === "编辑参数") {
            editCateAttribute(
              this.attrFrom.attr_id,
              this.attrFrom.attr_name,
              this.attrFrom.attr_vals
            ).then(
              (res) => {
                if (res.status === 200) {
                  this.$message.success("更改成功");
                  //发射
                  this.$bus.$emit("delCateAttrSuccess");
                  this.visible = false;
                }
              },
              (err) => {
                this.$message.success("更改失败");
              }
            );
          } else {
            // 添加参数
            addCateAttribute(
              this.selectLevel[2],
              this.attrFrom.attr_name,
              this.attrFrom.attr_sel,
              this.attrFrom.attr_vals
            ).then(
              (res) => {
                // console.log(res);
                if (res.status === 200) {
                  this.$message.success("参数添加成功");
                  //刷新
                  this.$bus.$emit("delCateAttrSuccess");
                  this.visible = false;
                } else this.$message.error("参数添加失败");
              },
              (err) => {
                this.$message.error("参数添加失败");
              }
            );
          }
        }
      });
    },
  },
  computed: {
    ...mapState(["selectLevel"]),
  },
};
</script>

<style  scoped>
::v-deep .el-dialog__body {
  padding: 30px 20px 0;
}
</style>
